<template>
    <div class="edu-page-warp">
        <condition-card
            @reset="resetSearch"
            @search="searchApplyNameList"
            body-style="padding: 24px 24px 6px 24px;"
        >
            <!--事件-->
            <el-form v-show="filterBlockStatus" label-width="120px">
                <el-row :gutter="16">
                    <el-col :span="8">
                        <el-form-item label="辅修年级:" prop="grade">
                            <el-date-picker
                                style="width:100%"
                                v-model="queryParams.grade"
                                @change="queryMinorMajorCondition"
                                type="year"
                                value-format="yyyy"
                                placeholder="请选择"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学校:" prop="schoolId">
                            <el-select
                                clearable
                                v-model="queryParams.schoolId"
                                placeholder="请选择学校"
                                @change="queryAdvancedLevelBySchool"
                                :filterable="true"
                                style="width:100%;"
                            >
                                <el-option
                                    v-for="item in options.schoolId"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="isOnCampus">
                        <el-form-item :label="$t('minor.major.college') +':'" prop="minorFaulty">
                            <el-select
                                clearable
                                v-model="form.minorFaulty"
                                placeholder="请选择"
                                @change="queryMinorMajorCondition"
                                :filterable="true"
                                style="width:100%;"
                            >
                                <el-option
                                    v-for="item in options.minorFaulty"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="辅修专业:" prop="minorMajorId" class="no-bottom">
                            <el-select
                                clearable
                                v-model="form.minorMajorId"
                                :filterable="true"
                                placeholder="请选择"
                                style="width:100%;"
                            >
                                <el-option
                                    v-for="item in options.minorMajorId"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="进阶层次:">
                            <el-select
                                clearable
                                v-model="form.advancedLevel"
                                style="width:100%;"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in options.advancedLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="姓名:" prop="name" class="no-bottom">
                            <el-input
                                v-model="form.name"
                                autocomplete="off"
                                placeholder="请输入姓名"
                                style="width:100%;"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学号:" prop="studentNum" class="no-bottom">
                            <el-input
                                v-model="form.studentNum"
                                placeholder="请输入学号"
                                autocomplete="off"
                                style="width:100%;"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="录取状态:" prop="recruitStatus" class="no-bottom">
                            <el-select
                                clearable
                                v-model="form.recruitStatus"
                                placeholder="请选择"
                                style="width:100%;"
                            >
                                <el-option
                                    v-for="item in options.recruitStatus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </condition-card>
        <div style="height: 2px;background-color: #D2D4D6;"></div>
        <el-card shadow="never" body-style="padding: 24px;">
            <!-- <div style="height:50px">
                <div
                    class="edu-page-title pull-left"
                    style="display:flex;flex-direction:row;align-items:center"
                >
                    <span>{{$t('message.filterCondition')}}</span>
                    <div style="display:flex;flex-direction:row;align-items:center" @click="fold">
                        <i
                            :class="filterBlockStatus?'el-icon-arrow-down':'el-icon-arrow-up'"
                            style="font-size:13px;color:#3A7FE8;margin-right:5px;font-weight:bold;"
                        ></i>
                        <span v-if="filterBlockStatus" style="color:#3A7FE8;font-size:12px;">收起</span>
                        <span v-else style="color:#3A7FE8;font-size:12px;">展开</span>
                    </div>
                </div>
                <div class="pull-right">
                    <el-button size="mini" @click="resetSearch">重置</el-button>
                    <el-button size="mini" type="primary" @click="y">筛选</el-button>
                </div>
            </div>
            <el-collapse-transition>
                <el-form v-show="filterBlockStatus" label-width="80px">
                    <el-row :gutter="24">
                        <el-col :span="8">
                            <el-form-item label="辅修年级:" prop="grade">
                                <el-date-picker
                                    style="width:100%"
                                    v-model="queryParams.grade"
                                    type="year"
                                    value-format="yyyy"
                                    placeholder="选择年级"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="学校:" prop="schoolId">
                                <el-select
                                    clearable
                                    v-model="queryParams.schoolId"
                                    placeholder="请选择学校"
                                    @change="queryAdvancedLevelBySchool"
                                    style="width:100%;"
                                >
                                    <el-option
                                        v-for="item in options.schoolId"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="进阶层次:">
                                <el-select
                                    clearable
                                    v-model="form.advancedLevel"
                                    style="width:100%;"
                                    @change="queryMinorMajorCondition"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in options.advancedLevel"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="8">
                            <el-form-item label="辅修专业:" prop="minorMajorId" class="no-bottom">
                                <el-select
                                    clearable
                                    v-model="form.minorMajorId"
                                    placeholder="请选择"
                                    style="width:100%;"
                                >
                                    <el-option
                                        v-for="item in options.minorMajorId"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="姓名:" prop="name" class="no-bottom">
                                <el-input
                                    v-model="form.name"
                                    autocomplete="off"
                                    placeholder="请输入姓名"
                                    style="width:100%;"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="学号:" prop="studentNum" class="no-bottom">
                                <el-input
                                    v-model="form.studentNum"
                                    placeholder="请输入学号"
                                    autocomplete="off"
                                    style="width:100%;"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="8">
                            <el-form-item label="录取状态:" prop="recruitStatus" class="no-bottom">
                                <el-select
                                    clearable
                                    v-model="form.recruitStatus"
                                    placeholder="请选择"
                                    style="width:100%;"
                                >
                                    <el-option
                                        v-for="item in options.recruitStatus"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-collapse-transition>-->

            <div style="width:100%;">
                <div class="addButon">
                    <el-button @click="exportExcel">导出</el-button>
                </div>
                <div v-if="formShow" class="signFont">
                    <div class="divbackground"></div>
                    <p>请输入查询条件选取名单</p>
                </div>
                <el-table
                    :data="tableData"
                    v-else
                    @selection-change="chooseRow"
                    tooltip-effect="light"
                >
                    <el-table-column prop="entranceTerm" label="辅修年级" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="studentNum" label="学号" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="faulty" label="所属学院" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="cultrueProfessionI18n" label="所属专业" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="advancedLevelName" label="进阶层次"></el-table-column>
                    <el-table-column prop="minorFaultyI18n" :label="$t('minor.major.college')" show-overflow-tooltip  v-if="showMinFacultyCol" min-width="120"></el-table-column>
                    <el-table-column prop="majorNameZn" label="辅修专业" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="minorGradePoint" label="辅修绩点" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="totalAvgGradePoint" label="总平均绩点" show-overflow-tooltip width="90"></el-table-column>
                    <el-table-column prop="prerequisiteTagId" label="先修课（绩点）" show-overflow-tooltip width="120"></el-table-column>
                    <el-table-column prop="attachId" label="附件">
                        <template slot-scope="scope">
                            <span
                                v-if="!!scope.row.attachId"
                                v-viewer="toolOptions"
                                class="preview-btn"
                            >
                                查看附件
                                <img :src="scope.row.imgUrl" />
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="recruitStatus" label="录取状态">
                        <template slot-scope="scope">
                            <el-tag
                                v-if="scope.row.recruitStatus*1 == 1"
                                type="success"
                                size="mini"
                            >已录取</el-tag>
                            <el-tag v-else type="danger" size="mini">未录取</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin: 18px 0;">
                <div style="float:right;">
                    <el-pagination
                        v-nocursor
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.currentPage"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="page.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.totalPage"
                    ></el-pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import Calendars from "common/src/api/calendars";
import { getSessionUser } from "common/src/api/session";
import UTILS from "common/src/utils/utils";
import {
    queryAdvancedLevel,
    queryMinorMajorInfo
} from "common/src/api/minor/collegemajor";
import {
    queryApplyMinorSignUpList,
    matriculateStudent,
    cancelMatriculate,
    finishMinorApply
} from "common/src/api/minor/applyMinorList";
import { queryUniversityDicByIsOnCampus } from "common/src/api/minor/collegemajor";
import {
    queryApplyNameListInfo,
    exportStudentList
} from "common/src/api/minor/queryApplySignUp";
import { findFaculty } from "common/src/api/faculty";
import nocursor from "common/src/directives/nocursor";
export default {
    directives: {
        nocursor
    },
    data() {
        return {
            filterBlockStatus: true,
            dialogTableVisible: false,
            formShow: true,
            schoolMinorIds: "",
            form: {
                name: "",
                school: "",
                studentNum: "",
                recruitStatus: "",
                advancedLevel: "",
                majorName: "",
                minorMajorId: "",
                prePoint: "",
                gradeLimit: "",
                recruitRemark: "",
                list: [{ tagName: "", proprePoint: "" }],
                minorFaulty: ''
            },
            options: {
                grade: [],
                advancedLevel: [],
                minorMajorId: [],
                schoolId: [],
                minorFaulty: [],
                recruitStatus: [
                    {
                        value: "0",
                        label: "未录取"
                    },
                    {
                        value: "1",
                        label: "已录取"
                    }
                ]
            },
            tableData: [],
            queryParams: {
                schoolId: "",
                pageNum_: 1,
                pageSize_: 20,
                grade: ""
            },
            page: {
                currentPage: 1,
                pageSize: 20,
                totalPage: 0
            },
            toolOptions: {
                toolbar: {
                    zoomIn: 4,
                    zoomOut: 4,
                    oneToOne: 4,
                    reset: 0,
                    prev: 0,
                    play: {
                        show: 4,
                        size: "large"
                    },
                    next: 0,
                    rotateLeft: 4,
                    rotateRight: 4,
                    flipHorizontal: 4,
                    flipVertical: 4
                }
            }, //预览工具栏设置
            showMinFacultyCol: false
        };
    },
    created() {},
    mounted() {
        if (!this.$checkMinor()) return;
        this.initAdvancedLevel("");
        this.initSchoolList();
        this.initFaculty();
    },
    computed: {
        isOnCampus() {
            return this.queryParams.schoolId == '10001';
        }
    },
    methods: {
        initFaculty() {
            findFaculty().then(res => { 
                let data = {"X_YX": res.data};
                UTILS.fillSelect({minorFaulty: "X_YX" }, data, this.options);
            });
        },
        initSchoolList() {
            let params = {
                isOnCampus: ""
            };
            queryUniversityDicByIsOnCampus(params).then(res => {
                if (res.code == 200) {
                    for (let key = 0; key < res.data.length; key++) {
                        this.options["schoolId"].push({
                            value: res.data[key].minorUniversityCode,
                            label: res.data[key].minorUniversityName
                        });
                    }
                    this.schoolList = res.data;
                }
            });
        },
        queryAdvancedLevelBySchool() {
            let isOnCampus = "";
            this.schoolList.length > 0 &&
                this.schoolList.forEach(e => {
                    if (e.minorUniversityCode == this.queryParams.schoolId) {
                        isOnCampus = e.isOnCampus;
                    }
                });
            this.options["advancedLevel"] = [];
            this.options["minorMajorId"] = [];
            this.form.advancedLevel = "";
            this.form.minorMajorId = "";
            this.form.minorFaulty = '';
            this.queryMinorMajorCondition();
            this.initAdvancedLevel(isOnCampus);
        },
        checkSelectable(row, index) {
            if (row.approvalStatus == "1") {
                return false;
            } else {
                return true;
            }
        },
        initAdvancedLevel(isOnCampus) {
            let params = {
                isOnCampus: isOnCampus ? isOnCampus : ""
            };
            this.options["advancedLevel"] = [];
            queryAdvancedLevel(params).then(res => {
                if (res.code == 200) {
                    for (let key = 0; key < res.data.length; key++) {
                        this.options["advancedLevel"].push({
                            value: res.data[key].advancedLevelCode,
                            label: res.data[key].advancedLevelName
                        });
                    }
                }
            });
        },
        queryMinorMajorCondition() {
            let params = {
                schoolId: this.queryParams.schoolId
            };
            if (this.isOnCampus) {
                params.minorFaulty = this.form.minorFaulty || '';
            }
            this.queryMinorMajorqueryMinorMajor(params);
        },
        queryMinorMajorqueryMinorMajor(params) {
            if (!this.$checkMinor()) return;
            this.options["minorMajorId"] = [];
            params.status = 1;
            if (this.queryParams.grade) {
                params.minorGrade = this.queryParams.grade;
            }
            queryMinorMajorInfo(params).then(res => {
                if (res.code == 200) {
                    for (let key = 0; key < res.data.list.length; key++) {
                        this.options["minorMajorId"].push({
                            value: res.data.list[key].majorCode,
                            label: res.data.list[key].majorNameZh
                        });
                    }
                }
            });
        },
        fold() {
            this.filterBlockStatus = !this.filterBlockStatus;
        },
        addPreTag() {
            this.form.list.push({ tagName: "", proprePoint: "" });
        },
        delPreTag(i) {
            if (this.form.list.length > 1) {
                this.form.list.splice(i, 1);
            }
        },
        searchApplyNameList() {
            if (!this.$checkMinor()) return;
            this.formShow = false;
            let params = {
                minorGrade: this.queryParams.grade || '',
                advanceLevel: this.form.advancedLevel,
                majorId: this.form.minorMajorId,
                minorSchool: this.queryParams.schoolId,
                name: this.form.name,
                studentNum: this.form.studentNum,
                matriculateStatus: this.form.recruitStatus,
                pageNum: this.queryParams.pageNum_,
                pageSize: this.queryParams.pageSize_
            };
            if (this.isOnCampus) {
                params.minorFaulty = this.form.minorFaulty || '';
                this.showMinFacultyCol = true;
            }else {
                 this.showMinFacultyCol = false;
            }
            /(^(http|https):\/\/[^\/]+)/.test(window.location.href);
            const origin = RegExp.$1;
            queryApplyNameListInfo(params).then(res => {
                if (res.code == 200) {
                    res.data.list.forEach((i, index) => {
                        if (i.attachId) {
                            res.data.list[index].imgUrl =
                                origin +
                                "/api/commonservice/obsfile/downloadfile?objectkey=" +
                                i.attachId;
                        }
                    });
                    this.tableData = res.data.list;
                    this.page.currentPage = res.data.pageNum_;
                    this.page.totalPage = res.data.total_;
                }
            });
        },
        resetSearch() {
            this.queryParams.grade = "";
            this.form.advancedLevel = "";
            this.form.minorMajorId = "";
            this.queryParams.schoolId = "";
            this.form.name = "";
            this.form.studentNum = "";
            this.form.recruitStatus = "";
            this.form.minorFaulty = "";
            this.formShow = true;
            this.options["minorMajorId"] = [];
            this.initAdvancedLevel("");
            this.searchApplyNameList();
        },
        handleCurrentChange(val) {
            this.queryParams.pageNum_ = val;
            this.searchApplyNameList();
        },
        //一页展示多少条
        handleSizeChange(pageSize) {
            this.queryParams.pageSize_ = pageSize;
            this.searchApplyNameList();
        },
        //导出excel
        exportExcel() {
            if (!this.$checkMinor()) return;
            let params = {
                minorGrade: this.queryParams.grade || '',
                advanceLevel: this.form.advancedLevel,
                majorId: this.form.minorMajorId,
                minorSchool: this.queryParams.schoolId,
                name: this.form.name,
                studentNum: this.form.studentNum,
                matriculateStatus: this.form.recruitStatus,
                minorFaulty: this.form.minorFaulty || ''
            };
            let url = exportStudentList(params);
            window.open(url);
        }
    }
};
</script>
<style scoped>
.title-one {
    font-size: 18px;
    font-family: "微软雅黑";
    width: 8%;
    float: left;
}
.title-two {
    width: 11%;
    float: left;
    font-size: 14px;
    font-family: "微软雅黑";
    text-align: right;
    color: #4c5c70;
}
.formstyle {
    padding-bottom: 62px;
    border-bottom: 2px solid #d2d4d6;
}
.searchButton {
    float: right;
}
.minDiv {
    float: left;
    width: 34%;
}
.rightCol {
    margin-left: 1rem;
}
.preDiv {
    border-bottom: 1px solid #e4e7ed;
    border-top: 1px solid #e4e7ed;
    line-height: 33px;
}
.addDiv {
    text-align: right;
}
.preList {
    padding-top: 3px;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 3px;
}
.diagDiv {
    margin-top: 25px;
}
.tipsDiv {
    float: left;
    width: 83%;
    margin-top: 16px;
    font-size: 12px;
}
.addButon {
    float: right;
    margin-left: 4px;
    margin-bottom: 15px;
    margin-top: 15px;
}
.pageTatal {
    float: left;
    margin-left: 10px;
}
.titleButton {
    float: left;
    color: #226fe5;
    font-weight: bold;
    line-height: 32px;
}
.fontDiv {
    float: right;
    margin-left: 8px;
}
.pull-right {
    float: right;
}
.signFont {
    font-size: 16px;
    font-family: "微软雅黑";
    font-weight: bold;
    color: #8896a7;
    text-align: center;
    min-height: 500px;
    padding: 153px 0px;
}
.divbackground {
    margin: 0 auto;
    width: 134px;
    height: 160px;
    background-image: url(/static/images/no_data_background.png);
}
.preview-btn {
    position: relative;
    color: #2876c2;
    font-size: 12px;
}
.preview-btn:hover {
    color: #409eff;
    cursor: pointer;
    text-decoration: underline;
}
.preview-btn img {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}
@-moz-document url-prefix() {
    /*只在firefox起作用*/
    input {
        box-shadow: none;
    }
}
</style>


